import React, { Component } from 'react';
import { AddressC } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, Row, Col } from 'antd';

class AddressCTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      p21: 3,
      c21: 37,
      p31: undefined,
      c31: undefined,
      p41: 3,
      c41: 37,
    };

    setTimeout(() => {
      this.setState({
        p31: 2,
        c31: 52,
        loading: false,
      });
    }, 2000);
  }

  changeAddress = () => {
    this.state.addressc1.setAddress({ province: '4', city: '54' });
  };
  onChange1 = (e) => {
    this.setState({
      p11: e.province,
      c11: e.city,
    });
  };
  onChange2 = (e) => {
    this.setState({
      p12: e.province,
    });
  };

  onChange3 = (e) => {
    this.setState({
      p21: e.province,
      c21: e.city,
    });
  };
  onChange4 = (e) => {
    this.setState({
      p31: e.province,
      c31: e.city,
    });
  };
  onChange5 = (e) => {
    this.setState({
      p41: e.province,
      c41: e.city,
    });
  };

  render() {
    return (
      <div style={{ width: '800px' }}>
        <div>
          <h2>无初始化值</h2>
          <Form>
            <AddressC form={this.props.form} provinceDataIndex={'p11'} cityDataIndex={'c11'} onChange={this.onChange1} />
          </Form>
          <Row gutter={16}>
            <Col span={8}>省：{this.state.p11}</Col>
            <Col span={8}>市：{this.state.c11}</Col>
          </Row>
        </div>
        <div>
          <h2>无初始化值-多选</h2>
          <Form>
            <AddressC
              form={this.props.form}
              provinceDataIndex={'p111'}
              cityDataIndex={'c111'}
              // onChange={this.onChange1}
              isMultiple={true}
            />
          </Form>
          {/* <Row gutter={16}>
                        <Col span={8}>省：{this.state.p11}</Col>
                        <Col span={8}>市：{this.state.c11}</Col>
                    </Row> */}
        </div>
        <div className='sectionItem'>
          <h2>同步加载初始化值</h2>
          <Form>
            <AddressC form={this.props.form} provinceDataIndex={'p21'} cityDataIndex={'c21'} provInit={this.state.p21} cityInit={this.state.c21} onChange={this.onChange3} />
          </Form>
          <Row gutter={16}>
            <Col span={8}>省：{this.state.p21}</Col>
            <Col span={8}>市：{this.state.c21}</Col>
          </Row>
        </div>
        <div className='sectionItem'>
          <h2>异步加载初始化值</h2>
          <Form>
            <AddressC
              form={this.props.form}
              provinceDataIndex={'p31'}
              cityDataIndex={'c31'}
              provInit={this.state.p31}
              cityInit={this.state.c31}
              onChange={this.onChange4}
              loading={this.state.loading}
            />
          </Form>
          <Row gutter={16}>
            <Col span={8}>省：{this.state.p31}</Col>
            <Col span={8}>市：{this.state.c31}</Col>
          </Row>
        </div>
        <div className='sectionItem'>
          <h2>点击按钮模拟因业务触发地区的更改</h2>
          <Form>
            <AddressC
              form={this.props.form}
              provinceDataIndex={'p41'}
              cityDataIndex={'c41'}
              provInit={this.state.p41}
              cityInit={this.state.c41}
              onChange={this.onChange5}
              onRef={(ref) => {
                this.setState({ addressc1: ref });
              }}
            />
          </Form>
          <Button onClick={this.changeAddress}>更改地区选项</Button>
          <Row gutter={16}>
            <Col span={8}>省：{this.state.p41}</Col>
            <Col span={8}>市：{this.state.c41}</Col>
          </Row>
        </div>
      </div>
    );
  }
}

export default Form.create()(AddressCTest);
